<template>
  <div class="home">
    <!--用户信息-->
    <div class="userInfo">
      <!--头像-->
      <el-avatar :src="imageUrl" :size="64" v-if="avatar!==''"></el-avatar>
      <!--其他信息-->
      <div class="userInfo-right">
        <!--用户昵称-->
        <div class="userInfo-nickname">
          {{ nickname }}
          <icon-svg v-if="sex==='太监'" icon-class="eunuch" class="eunuch-icon"></icon-svg>
          <icon-svg v-if="sex==='男'" icon-class="boy" class="man-icon"></icon-svg>
          <icon-svg v-if="sex==='女'" icon-class="girl" class="woman-icon"></icon-svg>
          <span v-if="vipLevel > 1" class="userInfo-vip2">年度大会员</span>
          <span v-if="vipLevel > 0" class="userInfo-vip1">正式会员</span>
        </div>
        <!--用户经验-->
        <div class="userInfo-level">
          <!--进度条-->
          <el-progress :show-text="false" :stroke-width="22" :percentage="percentage"></el-progress>
          <!--数字-->
          <span class="exp-info">
            <span>{{ exp }}</span>
            <span>/</span>
            <span>{{ levelExp }}</span>
          </span>
          <!--修改信息,空间按钮-->
          <span class="button" @click="() => { this.$router.push('/personal/myInfo') }">修改信息</span>
          <span class="button">
            我的空间
            <el-icon class="el-icon-arrow-right"></el-icon>
          </span>
        </div>
        <!--用户硬币-->
        <div class="userInfo-coin">
          <el-icon class="el-icon-coin icon"></el-icon>
          <span class="num">{{ coin }}</span>
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <!--动态信息-->
    <div class="dynamic-info">
      <div class="dynamic-info-item">
        粉丝
        <div>{{ funNum }}</div>
      </div>
      <div class="dynamic-info-item">
        吧
        <div>{{ barNum }}</div>
      </div>
      <div class="dynamic-info-item">
        关注
        <div>{{ followNum }}</div>
      </div>
    </div>
    <el-divider></el-divider>
  </div>
</template>

<script>
import { baseUrl } from '@/utils/const'
import IconSvg from '@/components/IconSvg'

export default {
  name: 'index',
  data () {
    return {
      levelExp: 800
    }
  },
  components: {
    IconSvg
  },
  computed: {
    // 全局用户信息
    nickname () {
      return this.$store.getters.nickname
    },
    avatar () {
      return this.$store.getters.avatar
    },
    sex () {
      return this.$store.getters.sex
    },
    coin () {
      return this.$store.getters.coin
    },
    vipLevel () {
      return this.$store.getters.vipLevel
    },
    funNum () {
      return this.$store.getters.funNum
    },
    barNum () {
      return this.$store.getters.barNum
    },
    followNum () {
      return this.$store.getters.followNum
    },
    exp () {
      return this.$store.getters.exp
    },
    // 经验条进度
    percentage () {
      return parseInt(this.exp / this.levelExp * 100)
    },
    imageUrl () {
      return baseUrl + this.avatar
    }
  }
}
</script>

<style scoped lang="less">

.userInfo {
  display: flex;

  .userInfo-right {
    margin-left: 24px;
    width: 660px;
    display: inline-block;
    cursor: default;

    .userInfo-nickname {
      font-weight: 700;
      font-size: 22px;
      color: @nickname;
      display: flex;
      align-items: center;

      .eunuch-icon {
        color: @menuText;
        font-size: 22px;
        font-weight: lighter;
      }

      .woman-icon {
        color: @pink;
        font-size: 22px;
        font-weight: lighter;
      }

      .man-icon {
        color: @blue;
        font-size: 22px;
        font-weight: lighter;
      }

      .userInfo-vip2 {
        display: inline-block;
        box-sizing: border-box;
        padding: 2px 4px;
        margin-left: 18px;
        background-color: @nickname;
        color: rgb(255, 255, 255);
        font-size: 12px;
        font-weight: lighter;
        border-radius: 4px;
        cursor: pointer;
      }

      .userInfo-vip1 {
        box-sizing: border-box;
        border: 1px solid #99a2aa;
        margin: 0 8px;
        color: #99a2aa;
        border-radius: 4px;
        cursor: default;
        font-size: 12px;
        font-weight: lighter;
        padding: 1px 4px;
      }
    }

    .userInfo-level {
      margin-top: 20px;
      margin-bottom: 20px;
      display: flex;

      .el-progress {
        width: 320px;
      }

      .exp-info {
        margin-left: 10px;
        font-weight: normal;
        width: 120px;
      }

      .button {
        box-sizing: border-box;
        border: 1px solid #99a2aa;
        margin: 0 8px;
        padding: 1px 8px;
        font-size: 14px;
        border-radius: 4px;
        cursor: default;
        i {
          margin: 0;
        }
      }

      .button:hover {
        border: 1px solid @blue;
        box-shadow: 1px @blue;
        color: @blue;
        cursor: pointer;
      }
    }

    .userInfo-coin {
      .icon {
        color: gold;
      }

      .num {
        margin-left: 8px;
      }
    }
  }

}

.dynamic-info {
  display: flex;
  padding: 10px 40px;

  .dynamic-info-item {
    flex: 1;
    text-align: center;
    cursor: pointer;

    div {
      margin-top: 20px;
    }
  }

  .dynamic-info-item:nth-child(2) {
    border-left: 1px solid @gray-p;
    border-right: 1px solid @gray-p;
  }
}

</style>
